<script setup lang="ts">
// 用tm代替t，因为tm是响应式的而且可以解析对象
import { onMounted, ref, computed } from "vue";
const { $axios } = useNuxtApp();
import { navigateTo } from "nuxt/app";
const { locale, setLocale, tm } = useI18n();

// 获取分组
const faqClassifyData = ref<any>({});
const faqDataLoad = ref<boolean>(false);
const fetchActivityClassifyData = async () => {
  try {
    faqDataLoad.value = false;
    // GET请求
    const { code, data } = await $axios.get<any>("/getFaqClassifyList");

    if (code === "200") {
      faqClassifyData.value = data.dataList;
      if (data.dataList[0]) {
        handleClassifyClick(data.dataList[0]);
      }
      faqDataLoad.value = true;
    }

    console.log("获取数据成功 => ", faqClassifyData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

// 获取分组下的问题
const faqData = ref<any>([]);
const searchQuery = ref<string>("");
const faqLoading = ref<boolean>(false);
const getFaqList = async (type: string, query?: string) => {
  try {
    faqLoading.value = true;
    // GET请求
    let requestUrl = "/getFaqList?type=" + type;
    if (searchQuery.value) {
      requestUrl += `&query=${searchQuery.value}`;
    }
    const { code, data } = await $axios.get<any>(requestUrl);
    faqLoading.value = false;
    if (code === "200") {
      faqData.value = data.dataList;
    }

    console.log("获取数据成功 => ", faqData.value);

    // POST请求示例
    // const result = await $axios.post('/users', { name: 'test', email: 'test@example.com' })
  } catch (error) {
    console.error("请求失败", error);
  }
};

const handleSearch = () => {
  getFaqList(selectItem.value.cid);
};

onMounted(() => {
  fetchActivityClassifyData();
});

/**
 * 路由跳转到Contact-us页面
 */
const toContactPage = async () => {
  await navigateTo("/contact-us");
};

/**
 * 四个的主题
 * 0  PRODUCTS
 * 1  ASSEMBLY
 * 2  ORDERING & PAYMENT
 * 3  SHIPPING & RETURNS
 */
let selectItem = ref<any>({});

/**
 * 切换不同的“子路由”
 */
// const questions = computed(() => {
//   switch (selectItem.value) {
//     case 0:
//       return tm("faq.questions.products");
//     case 1:
//       return tm("faq.questions.assembly");
//     case 2:
//       return tm("faq.questions.ordering");
//     case 3:
//       return tm("faq.questions.shipping");
//   }
// });

// 点击分类切换
const handleClassifyClick = (item: any) => {
  selectItem.value = item;
  getFaqList(item.cid);
};

const seo_title = computed(() => {
  return tm("shop.seo.title");
})
const seo_ogTitle = computed(() => {
  return tm("shop.seo.ogTitle");
})
const seo_description = computed(() => {
  return tm("shop.seo.description");
})
const seo_ogDescription = computed(() => {
  return tm("shop.seo.ogDescription");
})

// SEO 会根据中英文切换做不同的SEO
useSeoMeta({
  title: seo_title,
  ogTitle: seo_ogTitle,
  description: seo_description,
  ogDescription: seo_ogDescription,
  ogImage: 'https://oss-cdn.tearful.cn/shop/banner/AP_memorial_day_sale_BANNERSv2-01_2048x2048.webp'
})
</script>

<template>
  <v-app class="pt-16">
    <v-sheet class="pt-8">
      <!-- <v-sheet
        color="transparent"
        class="pt-8 pb-6 text-h3 d-flex justify-center"
      >
        <h1 class="text-[#333]">SERVICE</h1>
      </v-sheet>
      <v-sheet color="transparent" class="d-flex justify-center">
        <v-sheet color="transparent" width="180" height="11">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 254.81 15.88">
            <title>Asset 3</title>
            <g id="Layer_2" data-name="Layer 2">
              <g id="Layer_1-2" data-name="Layer 1">
                <path
                  class="cls-1-main text-[#333]"
                  d="M4.05,15.38C18.22,9.28,33.39,6,48.7,4.43a286.36,286.36,0,0,1,48-.36c17.35,1.15,34.61,3.38,51.88,5.34,17.61,2,35.27,3.78,53,4a191.5,191.5,0,0,0,24.89-1c7.61-.89,15.35-2.55,22.28-5.93a48.9,48.9,0,0,0,4.95-2.77c.8-.52,1.7-1.59.52-2.24s-3.1-.1-4.11.55c-5.9,3.84-12.75,5.76-19.66,6.8a157.82,157.82,0,0,1-23.9,1.34c-17.54-.07-35-1.73-52.45-3.69s-34.62-4.2-52-5.48A309.62,309.62,0,0,0,53.48.89C37.69,2.22,22,5.24,7.12,10.87c-1.8.68-3.58,1.41-5.35,2.17C1,13.38-.57,14.32.22,15.34s3,.42,3.83,0Z"
                ></path>
              </g>
            </g>
          </svg>
        </v-sheet>
      </v-sheet>
      <v-sheet color="transparent pt-8">
        <v-card
          class="mx-auto"
          color="transparent"
          elevation="0"
          max-width="480"
          flat
        >
          <v-card-text>
            <v-text-field
              v-model.trim="searchQuery"
              append-inner-icon="mdi-magnify"
              density="compact"
              label="Start typing"
              variant="solo"
              hide-details
              single-line
              @keyup.enter="handleSearch"
            ></v-text-field>
          </v-card-text>
        </v-card>
      </v-sheet> -->
      <!--四个按钮-->
      <v-sheet color="transparent" class="d-flex justify-center py-16">
        <div
          class="select-none grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2"
        >
          <label
            v-for="(item, index) in faqClassifyData"
            :key="'faq-' + index"
            class="radio flex flex-grow items-center justify-center rounded-sm p-1 cursor-pointer"
            @click="handleClassifyClick(item)"
          >
            <input
              type="radio"
              name="radio"
              value="html"
              class="peer hidden"
              :checked="selectItem.cid === item.cid"
            />
            <span
              class="text-[#fff] text-lg sm:w-80 w-96 py-3 font-weight-bold text-center tracking-widest border-[1px] border-[#001529] peer-checked:text-[#001529] peer-checked:bg-[#fff] peer-checked:border-[1px] peer-checked:border-[#001529] hover:text-[#001529] hover:bg-[#fff] hover:border-[1px] hover:border-[#001529] bg-[#001529] p-2 rounded-md transition duration-150 ease-in-out"
              >{{ item.name }}</span
            >
          </label>
          <!-- <label
            class="radio flex flex-grow items-center justify-center rounded-sm p-1 cursor-pointer"
            @click="selectItem = 0"
          >
            <input
              type="radio"
              name="radio"
              value="html"
              class="peer hidden"
              checked=""
            />
            <span
              class="text-[#fff] sm:w-80 w-96 py-3 font-weight-bold text-center tracking-widest border-[1px] border-[#001529] peer-checked:text-[#001529] peer-checked:bg-[#F5F4F2] peer-checked:border-[1px] peer-checked:border-[#001529] hover:text-[#001529] hover:bg-[#F5F4F2] hover:border-[1px] hover:border-[#001529] bg-[#001529] p-2 rounded-md transition duration-150 ease-in-out"
              >{{ $t("faq.questions.products.title") }}</span
            >
          </label>

          <label
            class="radio flex flex-grow items-center justify-center rounded-sm p-1 cursor-pointer"
            @click="selectItem = 1"
          >
            <input type="radio" name="radio" value="html" class="peer hidden" />
            <span
              class="text-[#fff] sm:w-80 w-96 py-3 font-weight-bold text-center tracking-widest border-[1px] border-[#001529] peer-checked:text-[#001529] peer-checked:bg-[#F5F4F2] peer-checked:border-[1px] peer-checked:border-[#001529] hover:text-[#001529] hover:bg-[#F5F4F2] hover:border-[1px] hover:border-[#001529] bg-[#001529] p-2 rounded-md transition duration-150 ease-in-out"
              >{{ $t("faq.questions.assembly.title") }}</span
            >
          </label>

          <label
            class="radio flex flex-grow items-center justify-center rounded-sm p-1 cursor-pointer"
            @click="selectItem = 2"
          >
            <input type="radio" name="radio" value="html" class="peer hidden" />
            <span
              class="text-[#fff] sm:w-80 w-96 py-3 font-weight-bold text-center tracking-widest border-[1px] border-[#001529] peer-checked:text-[#001529] peer-checked:bg-[#F5F4F2] peer-checked:border-[1px] peer-checked:border-[#001529] hover:text-[#001529] hover:bg-[#F5F4F2] hover:border-[1px] hover:border-[#001529] bg-[#001529] p-2 rounded-md transition duration-150 ease-in-out"
              >{{ $t("faq.questions.ordering.title") }}</span
            >
          </label>

          <label
            class="radio flex flex-grow items-center justify-center rounded-sm p-1 cursor-pointer"
            @click="selectItem = 3"
          >
            <input type="radio" name="radio" value="html" class="peer hidden" />
            <span
              class="text-[#fff] sm:w-80 w-96 py-3 font-weight-bold text-center tracking-widest border-[1px] border-[#001529] peer-checked:text-[#001529] peer-checked:bg-[#F5F4F2] peer-checked:border-[1px] peer-checked:border-[#001529] hover:text-[#001529] hover:bg-[#F5F4F2] hover:border-[1px] hover:border-[#001529] bg-[#001529] p-2 rounded-md transition duration-150 ease-in-out"
              >{{ $t("faq.questions.shipping.title") }}</span
            >
          </label> -->
        </div>
      </v-sheet>

      <!-- 问题列表-->
      <v-sheet color="transparent" class="pb-16 text-4xl">
        <div>
          <h1 class="text-center text-[#333]">{{ selectItem.name }}</h1>
        </div>
        <div class="d-flex justify-center py-10">
          <v-sheet
            class="w-[90%] md:w-[95%] lg:w-[85%] xl:w-[75%] 2xl:w-[55%] d-flex justify-center"
          >
            <v-expansion-panels elevation="0" variant="accordion">
              <v-expansion-panel
                v-for="(item, index) in faqData"
                :key="'faqdata-' + index"
                class="border-[2px] border-[#001529]"
              >
                <v-expansion-panel-title color="#001529">
                  <p class="text-[#fff] text-lg">
                    {{ item.title }}
                  </p>
                  <template v-slot:actions="{ expanded }">
                    <v-icon
                      color="#fff"
                      :icon="expanded ? 'mdi-minus' : 'mdi-plus'"
                    ></v-icon>
                  </template>
                </v-expansion-panel-title>
                <v-expansion-panel-text
                  class="text-body-2 text-[#333] bg-[#fff]"
                >
                  <div class="py-8 text-lg" v-html="item.content"></div>
                </v-expansion-panel-text>
              </v-expansion-panel>
            </v-expansion-panels>
          </v-sheet>
        </div>
      </v-sheet>

      <!--  联系我们按钮-->
      <v-sheet class="grid grid-cols-1 py-[90px]">
        <h1 class="text-center pb-8 font-normal text-2xl text-[#333]">
          {{ $t("faq.contact") }}
        </h1>
        <div class="d-flex justify-center" @click="toContactPage">
          <span
            class="cursor-pointer text-center hover:bg-[#001529] border-[1px] px-7 py-3 bg-[#001529] text-[#fff] pointer"
          >
            {{ $t("faq.button") }}
          </span>
        </div>
      </v-sheet>
    </v-sheet>
  </v-app>
</template>

<style scoped>
</style>